<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket-球球大作战</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .map{
            width: 19200px;
            height: 10800px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="map">
    <input type="text" id="messValue">
    <button onclick="init()">连接到目标</button>
    <button onclick="sendPosition()">发送当前坐标</button>
    <div id="message">

    </div>
</div>
</body>

<!--导包 SocketJS库 Stomp.js库-->

<!--SockJS库-->
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

<!--Stomp.js 库-->
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>

<script>
    let socket;
    let client;
   function init(){
       //建立通信连接
       socket = new SockJS("http://192.168.0.20/ws");

       //创建Stomp客户端实例
       client = Stomp.over(socket);

       //-------收到消息--------
       client.connect({},function (){
           //订阅
           client.subscribe("/game/position",function (msg) {
               console.log("收到消息",msg)
              let message = document.getElementById("message");
               message.innerHTML+=msg.body+"\n";
           })
       })
    }


   //-------发送逻辑--------
    function  sendPosition(){

      let messValue = document.getElementById("messValue").value;
        let json = {
            "messValue":messValue
        }

        //发送
        client.send("/qiuqiu/position",{},JSON.stringify(json));
    }


    
</script>
</html>